import { Component, OnDestroy } from '@angular/core'
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router'
import { NzMessageService } from 'ng-zorro-antd'

@Component({
  selector: 'passport-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.less'],
})
export class UserRegisterComponent implements OnDestroy {
  form: FormGroup
  error = ''
  type = 0
  loading = false
  visible = false
  status = 'pool'
  progress = 0
  passwordProgressMap = {
    ok: 'success',
    pass: 'normal',
    pool: 'exception',
  }
  count = 0
  interval$: any

  constructor(
    fb: FormBuilder,
    private router: Router,
    public msg: NzMessageService,
  ) {
    this.form = fb.group({
      mail: [null, [Validators.email]],
      password: [
        null,
        [
          Validators.required,
          Validators.minLength(6),
          UserRegisterComponent.checkPassword.bind(this),
        ],
      ],
      confirm: [
        null,
        [
          Validators.required,
          Validators.minLength(6),
          UserRegisterComponent.passwordEquar,
        ],
      ],
      mobilePrefix: ['+86'],
      mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]],
      captcha: [null, [Validators.required]],
    })
  }

  static checkPassword(control: FormControl) {
    if (!control) return null
    const self: any = this
    self.visible = !!control.value
    if (control.value && control.value.length > 9) self.status = 'ok'
    else if (control.value && control.value.length > 5) self.status = 'pass'
    else self.status = 'pool'

    if (self.visible)
      self.progress =
        control.value.length * 10 > 100 ? 100 : control.value.length * 10
  }

  static passwordEquar(control: FormControl) {
    if (!control || !control.parent) return null
    if (control.value !== control.parent.get('password').value) {
      return { equar: true }
    }
    return null
  }

  // region: fields

  get mail() {
    return this.form.controls.mail
  }
  get password() {
    return this.form.controls.password
  }
  get confirm() {
    return this.form.controls.confirm
  }
  get mobile() {
    return this.form.controls.mobile
  }
  get captcha() {
    return this.form.controls.captcha
  }

  // endregion

  // region: get captcha
  getCaptcha() {
    this.count = 59
    this.interval$ = setInterval(() => {
      this.count -= 1
      if (this.count <= 0) clearInterval(this.interval$)
    }, 1000)
  }

  // endregion

  submit() {
    this.error = ''
    for (const i of Object.keys(this.form.controls)) {
      this.form.controls[i].markAsDirty()
      this.form.controls[i].updateValueAndValidity()
    }
    if (this.form.invalid) return
    // mock http
    this.loading = true
    setTimeout(() => {
      this.loading = false
      this.router.navigate(['/passport/register-result'])
    }, 1000)
  }

  ngOnDestroy(): void {
    if (this.interval$) clearInterval(this.interval$)
  }
}
